<template>
  <div class="listWapper">
    <customDetailsTopbar title="房屋租赁消防安全" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <div class="d-flex  w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="radioValue" is-scroll @change="tagChange" />
      </div>
      <customSearch ref="customSearch" placeholder="请输入建筑物名称" title="房屋租赁列表" :is-super-search="true" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList && tableList.length>0" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index +1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="des,ind in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] !== '' && item[des.value] !== undefined ? item[des.value]:'/' }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="到期时间" />
          <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.signFireSafetyAgreement" title="是否签订消防安全协议" />
          <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.isPeopleCrowded" title="是否人员密集场所" />
          <!-- <el-input v-model="form.name" class="mb-1" placeholder="请输入污染源名称：" size="small" clearable /> -->
          <!-- <customPopCheckbox :list="gradeList" :check-value.sync="form.grade" title="污染源等级" />
            <customPopCheckbox :list="typeList" :check-value.sync="form.type" title="风险物资类型" /> -->
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { roomLetManagement, roomLesseeManagement } from '@/api/fireFighting'
export default {
  mixins: [commonList],
  data() {
    return {
      total: 10,
      pages: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        buildName: '',
        signFireSafetyAgreement: '',
        isPeopleCrowded: '',
        companyIds: -1
      },
      natureList: [
        { label: '民用建筑', value: '民用建筑' },
        { label: '工业建筑', value: '工业建筑' },
        { label: '农业建筑', value: '农业建筑' }
      ],
      gradeList: [
        { label: '一级', value: '一级' },
        { label: '二级', value: '二级' },
        { label: '三级', value: '三级' }
      ],
      tagList: [
        { label: '房屋出租消防安全管理', value: '房屋出租消防安全管理' },
        { label: '房屋承租消防安全管理', value: '房屋承租消防安全管理' }
      ],
      checkedTag: '房屋出租消防安全管理',
      desList: [
        { label: '房屋名称', value: 'buildName', icon: '&#xe62c;' },
        { label: '承租单位', value: 'lesseeName', icon: '&#xe725;' },
        { label: '使用用途', value: 'useCharacter', icon: '&#xe61c;' },
        { label: '是否签订消防安全协议', value: 'signFireSafetyAgreement', icon: '&#xe6f7;' },
        { label: '是否人员密集场所', value: 'isPeopleCrowded', icon: '&#xe682;' },
        { label: '到期日期', value: 'deadline', icon: '&#xe617;' }
      ],
      tableList: [],
      radioValue: 0
    }
  },
  mounted() {
    const { current, checkedTag } = this.$route.query
    this.current = current || ''
    this.checkedTag = checkedTag || '房屋出租消防安全管理'
    this.radioValue = this.checkedTag === '房屋出租消防安全管理' ? 0 : 1
    this.title = this.checkedTag
    // this.getList()
    this.tagChange({ item: { label: this.checkedTag }})
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取列表
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const api = {
        '房屋出租消防安全管理': roomLetManagement,
        '房屋承租消防安全管理': roomLesseeManagement
      }
      const { status, data } = await api[this.checkedTag](this.form)
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.total = data.total
        this.pages = data.pages
        this.$refs.customLoadmore.loadStatus = false
        this.layout.hideLoading()
      }
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/leaseOfHousesDetail',
        query: {
          roomLetId: item.roomLetId,
          checkedTag: this.checkedTag,
          current: this.$route.query.current
        }
      })
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    handleSearch(val) {
      this.form.buildName = val
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    resetSuperSearch() {
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
      this.$refs.customSearch.restore()
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.form.companyIds = -1
    },
    tagChange(v) {
      this.resetSuperSearch()
      this.checkedTag = v.item.label
      this.desList[1].label = this.checkedTag === '房屋出租消防安全管理' ? '承租单位' : '出租单位'
      this.desList[1].value = this.checkedTag === '房屋出租消防安全管理' ? 'lesseeName' : 'letName'
      this.tableList = []
      this.form.pageNum = 1
      this.getList()
    },
    handleSuperSearch() {
      this.form.pageNum = 1
      this.superSearch = false
      this.tableList = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
